import React, { useState, useEffect } from "react";
import APIService from '../../services/apiservice';

const Sqls = (props) => {
  const [sqls, setSqls] = useState([])
  const href_base = window.location.href+"/";
  useEffect(() => {
    const apiService = new APIService();
    const sqls =
    console.log("test");
    console.log(sqls);
    apiService.getItems("sqls/").then((response) => {
      console.log(response);
      setSqls(response)
    })
  }, []);

    return (<div>
    <table border={1}>
    <thead>
    <tr>
        <th>ID</th>
        <th>name</th>
        <th>description</th>
        <th>sql</th>
        <th>status</th>
        <th>type</th>
        <th>updated</th>
        <th>updated_dt</th>
        <th>valid_from</th>
        <th>version</th>
    </tr>
    </thead>
    <tbody>
    {sqls.map((item) => {return (
      <tr key={item.id}>
        <td><a href={href_base+item.id}>{item.id}</a></td>
        <td>{item.name}</td>
        <td>{item.description}</td>
        <td>{item.sql}</td>
        <td>{item.status}</td>
        <td>{item.type}</td>
        <td>{item.updated}</td>
        <td>{item.updated_dt}</td>
        <td>{item.valid_from}</td>
        <td>{item.version}</td>
      </tr>)})}
    </tbody>
    </table>
    </div>
    );
}

export default Sqls;
